/*加载动画*/
$(function(){
	$('.load').addClass('load_none');
});
function openLoading(){
	$('.load').removeClass('load_none');
}
function closeLoading(){
	$('.load').addClass('load_none');
}
/**
 * 选择器 统一管理
 * @param {Object} $ mui对象
 */
(function($) {

	$.init();
	/**
	 * 处理日期 选择器
	 */
	var dateBtns = $('.date-select');
		dateBtns.each(function(i, btn) {
		btn.addEventListener('tap', function() {
			var _self = this;
			if (_self.picker) {
				_self.picker.show(function(rs) {
					_self.picker.dispose();
					_self.picker = null;
				});
			} else {
				/**
				 * data 常规操作 API参考地址：http://dev.dcloud.net.cn/mui/ui/#dtpicker
				 * {} :默认年月日时分
				 * {"type":"date","beginYear":2014,"endYear":2016} :type指定类型,beginYear:开始年，endYear：结束年
				 * {"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020} :设定选中的日期
				 * {"type":"date"} :指定类型
				 *  'datetime'	完整日期视图(年月日时分)
				 *	'date'	年视图(年月日)
				 *	'time'	时间视图(时分)
				 *	'month'	月视图(年月)
				 *	'hour'	时视图(年月日时)
				 */
				var optionsJson = this.getAttribute('data') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				/*
				 * 首次显示时实例化组件
				 * 示例为了简洁，将 options 放在了按钮的 dom 上
				 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
				 */
				_self.picker = new $.DtPicker(options);
				_self.picker.show(function(rs) {
					/*
					 * rs.value 拼合后的 value
					 * rs.text 拼合后的 text
					 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
					 * rs.m 月，用法同年
					 * rs.d 日，用法同年
					 * rs.h 时，用法同年
					 * rs.i 分（minutes 的第二个字母），用法同年
					 *
					 * 
					 * 返回 false 可以阻止选择框的关闭
					 * return false;
					 *
					 *
					 * 释放组件资源，释放后将将不能再操作组件
					 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
					 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
					 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
					 */
					_self.value =rs.text;
					_self.picker.dispose();
					_self.picker = null;
				});
			}

		}, false);

	});

	/**
	 * 处理数据 选择器
	 */
	var recoreBtns = $('.record-select');
	recoreBtns.each(function(i, btn) {
		btn.addEventListener('tap', function() {
			var _self = this;
			if (_self.picker) {
				_self.picker.show(function(rs) {
					_self.picker.dispose();
					_self.picker = null;
				});
			} else {
				/**
				 * data 常规操作 API参考地址：http://dev.dcloud.net.cn/mui/ui/#dtpicker
				 * {} :默认年月日时分
				 * {"type":"date","beginYear":2014,"endYear":2016} :type指定类型,beginYear:开始年，endYear：结束年
				 * {"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020} :设定选中的日期
				 * {"type":"date"} :指定类型
				 *  'datetime'	完整日期视图(年月日时分)
				 *	'date'	年视图(年月日)
				 *	'time'	时间视图(时分)
				 *	'month'	月视图(年月)
				 *	'hour'	时视图(年月日时)
				 */
				var optionsJson = this.getAttribute('data') || '{}';				
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				console.log(id);
				/*
				 * 首次显示时实例化组件
				 * 示例为了简洁，将 options 放在了按钮的 dom 上
				 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
				 */
				_self.picker = new $.PopPicker();
				_self.picker.setData(options);
				_self.picker.show(function(rs) {
					/*
					 * 返回 false 可以阻止选择框的关闭
					 * return false;
					 *
					 *
					 * 释放组件资源，释放后将将不能再操作组件
					 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
					 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
					 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
					 */
					console.log(rs[0]);
					document.querySelectorAll('.record-select')[i].querySelector('.record-select-data').value = _getParam(rs[0],'text');
					document.querySelectorAll('.record-select')[i].querySelector('.record-select-id').value = _getParam(rs[0],'value');
					_self.picker.dispose();
					_self.picker = null;
				});
			}

		}, false);
	});



	/**
	 * 处理数据二级联动选择器
	 */
	var recoreBtns = $('.record-two-select');
	recoreBtns.each(function(i, btn) {
		btn.addEventListener('tap', function() {
			var _self = this;
			if (_self.picker) {
				_self.picker.show(function(rs) {
					_self.picker.dispose();
					_self.picker = null;
				});
			} else {
				/**
				 * data 常规操作 API参考地址：http://dev.dcloud.net.cn/mui/ui/#dtpicker
				 * {} :默认年月日时分
				 * {"type":"date","beginYear":2014,"endYear":2016} :type指定类型,beginYear:开始年，endYear：结束年
				 * {"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020} :设定选中的日期
				 * {"type":"date"} :指定类型
				 *  'datetime'	完整日期视图(年月日时分)
				 *	'date'	年视图(年月日)
				 *	'time'	时间视图(时分)
				 *	'month'	月视图(年月)
				 *	'hour'	时视图(年月日时)
				 */
				var optionsJson = this.getAttribute('data') || '{}';				
				var options = JSON.parse(optionsJson);
				console.log(options);
				var id = this.getAttribute('id');
				console.log(id);
				/*
				 * 首次显示时实例化组件
				 * 示例为了简洁，将 options 放在了按钮的 dom 上
				 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
				 */
				_self.picker = new $.PopPicker({
						layer: 2
					});
				_self.picker.setData(options);
				_self.picker.show(function(rs) {
					/*
					 * 返回 false 可以阻止选择框的关闭
					 * return false;
					 *
					 *
					 * 释放组件资源，释放后将将不能再操作组件
					 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
					 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
					 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
					 */
					document.querySelectorAll('.record-two-select')[i].querySelector('.record-two-select-data').value = _getParam(rs[0],'text');
					_self.picker.dispose();
					_self.picker = null;
				});
			}

		}, false);
	});
	
	
})(mui);


/**
 * 根据传入的键获取json对象的内容
 * @param {Object} obj 对象
 * @param {Object} param 键
 */
var _getParam = function(obj, param) {
	return obj[param] || '';
};

/**
 * 文件上传事件初始化
 * @param {Object} uploader
 */
function uploaderInit(uploader){
	// 当有文件添加进来的时候
	uploader.on( 'fileQueued', function( file ) {
	    var $li = $(
	            '<div id="' + file.id + '" class="file-item thumbnail">' +
					'<span class="file_close"></span>' + 
	                '<img>' +
	            '</div>'
	            ),
	        $img = $li.find('img');
	
	    // $list为容器jQuery实例
	    $("#preview").append( $li );
	
	    // 创建缩略图
	    // 如果为非图片文件，可以不用调用此方法。
	    // thumbnailWidth x thumbnailHeight 为 100 x 100
	    uploader.makeThumb( file, function( error, src ) {
	        if ( error ) {
	            $img.replaceWith('<img src="11">');
	            return; 
	        }
	        $img.attr( 'src', src );
	    }, 70, 70 );
	});
	// 文件上传过程中创建进度条实时显示。
	uploader.on( 'uploadProgress', function( file, percentage ) {
	    var $li = $( '#'+file.id ),
	        $percent = $li.find('.progress span');
	
	    // 避免重复创建
	    if ( !$percent.length ) {
	        $percent = $('<p class="progress"><span></span></p>')
	                .appendTo( $li )
	                .find('span');
	    }
	
	    $percent.css( 'width', percentage * 100 + '%' );
	});
	
	// 文件上传成功，给item添加成功class, 用样式标记上传成功。
	uploader.on( 'uploadSuccess', function( file ) {
	    var $li = $( '#'+file.id ),
	        $error = $li.find('div.error');
	    	
	    // 避免重复创建
	    if ( !$error.length ) {
	        $error = $('<div class="success"></div>').appendTo( $li );
	    }
	    	
	    $error.text('上传成功');
	});
	
	// 文件上传失败，显示上传出错。
	uploader.on( 'uploadError', function( file ) {
	    var $li = $( '#'+file.id ),
	        $error = $li.find('div.error');
	
	    // 避免重复创建
	    if ( !$error.length ) {
	        $error = $('<div class="error"></div>').appendTo( $li );
	    }
	
	    $error.text('上传失败');
	});
	
	// 完成上传完了，成功或者失败，先删除进度条。
	uploader.on( 'uploadComplete', function( file ) {
	    $( '#'+file.id ).find('.progress').remove();
	});
	mui.init({
		swipeBack:true //启用右滑关闭功能
	});
	mui('.mui-content .mui-switch').each(function() { //循环所有toggle
		//toggle.classList.contains('mui-active') 可识别该toggle的开关状态
		this.parentNode.querySelector('span').innerText = '开关' + (this.classList.contains('mui-active') ? '' : '');
		this.addEventListener('toggle', function(event) {
			//event.detail.isActive 可直接获取当前状态
			this.parentNode.querySelector('span').innerText = '开关' + (event.detail.isActive ? '' : '');
		});
	});
}